import React, { Component } from 'react'
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native'
import { UserIncome } from './UserIncome'
import { UserInfoLevel } from './UserInfoLevel'


export default class UserInfo extends Component {

  
  render() {
    return (
      <View style={{height:340}}>
      <ImageBackground source={require('../assets/images/user-bg.png')}
        style={styles.userBg}
        resizeMode="cover" // 可选：cover, contain, stretch, repeat, center
      >
        <View style={styles.container}>
          {/* 用户头像 */}
          <View style={styles.userInfoST}>
            <Image source={require('../assets/images/avatar.jpg')} style={styles.userAvatar} resizeMode='cover'/>
            <Image source={require('../assets/images/lvevl.png')} style={styles.userLvevl} resizeMode='cover'/>
          </View>
          {/* 用户信息 */}
          <View style={{margin:15}}>
            <View style={{flexDirection:'row'}}>
              <Text style={styles.fontColor}>Stank</Text>
              <UserInfoLevel source={require("../assets/images/userLevel.png")}
                title="合伙人" width={60} height={20}
              />
            </View>
            <View style={{flexDirection:'row',alignItems:'baseline'}}>
              <Text style={styles.whiteFont}>积分余额：</Text>
              <Text style={styles.whiteFont}>600</Text>
            </View>
            <View style={{flexDirection:'row',height:25,alignItems:'baseline'}}>
              <Text style={[styles.whiteFont]}>邀请口令：</Text>
              <Text style={styles.whiteFont}>12345678</Text>
              <View style={styles.buttonCopy}>
                <Text style={styles.copyFont}>复制</Text>
              </View>
              <Image source={require('../assets/icons/IDShow.png')} style={{height:16,width:24}}/>
            </View>
            <View style={styles.properID}>
              <Text style={[styles.whiteFont,styles.properFont]}>申请专属口令</Text>
            </View>
          </View>
          {/* 用户自定义 */}
          <View style={{flex:1,justifyContent:'center'}}>
            <Image source={require('../assets/icons/setting.png')} style={{width:20,height:20,alignSelf:'center'}}/>
          </View>
        </View>
        <View style={{flexDirection:'row',justifyContent:'center'}}>
          <UserIncome/>
        </View>
      </ImageBackground>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    paddingTop:20,
    flexDirection:'row'
  },
  userBg:{
    // width:390,
    height:223,
    flex:1
  },
  userInfoST:{
    marginTop:35,
    marginLeft:20,
    width:70
  },
  userAvatar:{
    width:60,height:60,
    borderRadius:30,
  },
  userLvevl:{
    position:'absolute',
    right:0,
    top:40,
    width:18,
    height:18
  },
  fontColor:{
    color:'white',
    marginRight:10,
    alignContent:'flex-end',
    marginBottom:10,
    fontSize:23
  },
  userInfoLevel:{
    height:20,
    width:60
  },
  whiteFont:{
    color:'white',
    fontSize:13,marginBottom:10
  },
  buttonCopy:{
    width: 32,
    height: 18,
    borderRadius: 3,
    backgroundColor: "#f1d3a8",
    marginLeft:5,
    marginRight:10
  },
  copyFont:{
    marginLeft:5,
    // padding:2,
    height: 18,
    fontSize: 11,
    lineHeight:18,
    color: "#6c2a09"
  },
  properID:{
    width: 110,
    textAlign:'center',
    height: 30,
    marginTop:10,
    borderWidth:1,
    // padding:3,
    borderColor:'#f1d3a8',
    borderRadius: 15
  },
  properFont:{
    textAlign:'center',
    lineHeight:28,
    height:28
  }
})


